<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="dialogTitle"
    width="600px"
    @close="handleClose"
  >
    <!-- 表单数据 -->
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-position="right"
      label-width="88px"
      style="width: 400px; margin-left: 50px"
    >
      <el-form-item :label="$t('table.icon')">
        <upload-image
          @onSuccess="uploadIconSuccess"
          :iconUrl="form.icon ? `${$common.apiUrl + form.icon}` : null"
        />
      </el-form-item>
      <el-form-item :label="$t('table.code')" prop="code">
        <el-input v-model="form.code" clearable />
      </el-form-item>
      <el-form-item :label="$t('table.name')" prop="name">
        <el-input v-model="form.name" clearable />
      </el-form-item>
      <el-form-item :label="$t('table.user_name')" prop="user_name">
        <el-input v-model="form.user_name" disabled />
      </el-form-item>
      <el-form-item :label="$t('table.remark')" prop="remark">
        <el-input v-model="form.remark" clearable />
      </el-form-item>
      <el-form-item :label="$t('table.create_time')" prop="create_time">
        <el-input v-model="form.create_time" disabled />
      </el-form-item>
    </el-form>
    <!-- 底部按钮组 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">{{ $t('dialog.Cancel') }}</el-button>
        <el-button type="primary" @click="handleConfirm">{{
          $t('dialog.Confirm')
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import UploadImage from '@/components/UploadImage/index.vue'
import dayjs from 'dayjs'
import { addCatalog, updateCatalog } from '@/api/catalog.js'
import { useStore } from 'vuex'
const store = useStore()
import { useI18n } from 'vue-i18n'
const i18n = useI18n()

// 父组件传参
const props = defineProps({
  dialogTitle: {
    type: String,
    default: '',
    required: true
  },
  dialogTableValue: {
    type: Object,
    default: () => {}
  }
})

// 是否显示弹窗
const dialogVisible = ref(false)
// 表单Ref
const formRef = ref(null)
// 表单数据
const form = ref({
  icon: null,
  code: null,
  name: null,
  user_id: null,
  user_name: null,
  create_time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  remark: '',
  is_delete: 0
})
// 用户信息
const userInfo = ref(store.getters.user || localStorage.getItem('user'))

// 表单校验
const rules = ref({
  code: [
    {
      required: true,
      message: i18n.t('rules.code'),
      trigger: 'blur'
    }
  ],
  name: [
    {
      required: true,
      message: i18n.t('rules.name'),
      trigger: 'blur'
    }
  ]
})

const emits = defineEmits(['update:modelValue', 'initCatalogList'])

// 初始化数据
const initData = () => {
  form.value.user_id = userInfo.value.id
  form.value.user_name = userInfo.value.username
}

// 监听表单数据
watch(
  () => props.dialogTableValue,
  () => {
    if (props.dialogTitle === i18n.t('dialog.editData')) {
      const formData = JSON.parse(JSON.stringify(props.dialogTableValue))
      form.value = formData
    } else {
      initData()
    }
  },
  { deep: true, immediate: true }
)

// 关闭弹窗
const handleClose = () => {
  emits('update:modelValue', false)
}

// 确认
const handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      const isEdit = props.dialogTitle === i18n.t('dialog.editData')
      const res = isEdit
        ? await updateCatalog(form.value)
        : await addCatalog(form.value)
      if (res.status === 0) {
        ElMessage.success(
          isEdit
            ? i18n.t('message.updeteSuccess')
            : i18n.t('message.saveSuccess')
        )
        emits('initCatalogList')
        handleClose()
      } else {
        ElMessage.error(
          isEdit ? i18n.t('message.updeteFailed') : i18n.t('message.saveFailed')
        )
      }
    } else {
      return false
    }
  })
}

// 上传图标成功
const uploadIconSuccess = (data) => {
  form.value.icon = data.file_url
}
</script>
<style lang="scss"></style>
